<template>
  <div  class="register">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h1 style="text-align:center;font-size: 20px"><i class="el-icon-edit"></i>  注册</h1>
      </div>
      <div>
        <el-form ref="form":model="form" :rules="rules" label-width="80px">
              <!--账户id输入栏-->
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item class="userid" prop="userid" label="用户名">
                <el-input type="text" placeholder="请输入学号" v-model="form.userid" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="stuid" prop="stuid" label="学号">
                <el-input type="text" placeholder="请输入学号" v-model="form.stuid" size="small"></el-input>
              </el-form-item>
            </el-col>
              <!--姓名输入栏-->
            <el-col :span="12">
              <el-form-item class="name" prop="name" label="姓名">
                <el-input type="text" placeholder="请输入姓名" v-model="form.name" size="small"></el-input>
              </el-form-item >
            </el-col>
              <!--班级输入栏-->
            <el-col :span="12">
              <el-form-item class="className" prop="className" label="班级">
                <el-input type="text" placeholder="请输入班级" v-model="form.className" size="small"></el-input>
              </el-form-item >
            </el-col>
              <!--AcID输入栏-->
            <el-col :span="12">
              <el-form-item class="AcID" prop="AcID" label="AcID">
                <el-input type="text" placeholder="请输入AcID" v-model="form.AcID" size="small"></el-input>
              </el-form-item >
            </el-col>
              <!--CfID输入栏-->
            <el-col :span="12">
              <el-form-item class="CfID1" prop="CfID1" label="CfID1">
                <el-input type="text" placeholder="请输入CfID1" v-model="form.CfID1" size="small"></el-input>
              </el-form-item >
            </el-col>
            <el-col :span="12">
              <el-form-item class="CfID2" prop="CfID2" label="CfID2">
                <el-input type="text" placeholder="请输入CfID2" v-model="form.CfID2" size="small"></el-input>
              </el-form-item >
            </el-col>
            <el-col :span="12">
              <el-form-item class="CfID3" prop="CfID3" label="CfID3">
                <el-input type="text" placeholder="请输入CfID3" v-model="form.CfID3" size="small"></el-input>
              </el-form-item >
            </el-col>
              <!--密码输入栏-->
            <el-col :span="12">
              <el-form-item class="userpsd" prop="userpsd" label="密码">
                <el-input type="password" placeholder="请输入密码" v-model="form.userpsd" size="small"></el-input>
              </el-form-item >
            </el-col>
            <el-col :span="12">
              <el-form-item class="userpsd1" prop="userpsd1" label="确认密码">
                <el-input type="password" placeholder="请再次输入密码" v-model="form.userpsd1" size="small"></el-input>
              </el-form-item >
            </el-col>
          </el-row>
          <!--注册按钮-->
          <el-form-item class="button" align="center">
            <!--注册按钮 跳转链接-->
            <el-button align='center' type="primary" icon="el-icon-edit" @click="register">注册</el-button>
            <el-button type="text" @click="backLogin">返回登录界面</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "register",
  data(){
    var validateAcid = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('请输入AcID'));
      }
      else if(!/^[A-Za-z0-9]{3,16}$/.test(value)){
        callback(new Error('请输入3-16位字母或数字'));
      }
      else{
        callback();
      }
    }
    var validatePass = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('请再次输入密码'));
      }
      else if(value !== this.form.userpsd){
        callback(new Error('两次密码输入不一致'));
      }
      else{
        callback();
      }
    }
    return{
      // 与账号和密码输入绑定
      form:{
        userid:'', //用户名，用v-model绑定监听，将输入的字符串赋值给username变量
        stuid: '',
        name:'',
        className:'',
        AcID:'',
        CfID1:'',
        CfID2:'',
        CfID3:'',
        userpsd:'',
        userpsd1:''
      },
      rules:{
        userid: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        stuid: [
          { required: true, message: '请输入学号', trigger: 'blur' },
        ],
        name:[
          { required:true,message:'请输入姓名',trigger:'blur'},
        ],
        className:[
          { required:true,message:'请输入班级',trigger:'blur'},
        ],
        AcID:[
          { required:true,validator: validateAcid,trigger:'blur'},
        ],
        CfID1:[
          { required:true,message:'请输入CfID1',trigger:'blur'},
        ],
        userpsd:[
          { required:true,message:'请输入密码',trigger:'blur'},
        ],
        userpsd1:[
          { required:true,validator: validatePass,trigger:'blur'},
        ]
      }
    }
  },

  methods:{
    //注册按钮 使用axios发起请求
    register(){
      this.$axios
          .post('/userinfo/register', {
            userid: this.form.userid,
            stuid: this.form.stuid,
            stuname: this.form.name,
            stuclass: this.form.className,
            stuAcid: this.form.AcID,
            stuCfid: this.form.CfID1,
            stuCfid1: this.form.CfID2,
            stuCfid2: this.form.CfID3,
            userpsd: this.form.userpsd
          })
          .then(function (response){
            console.log(response);
            alert('注册成功')  //如果返回成功的结果就跳转到登录页面。
          })
          .catch(function(error){
            console.log(error);
            alert('请输入正确的用户名和密码')
          })
    },

    //返回登录界面
    backLogin(){
      this.$router.push("/")
    }
  }
}
</script>
<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 500px;
  margin: 100px 900px
}
.register{
  background:url("../assets/1.jpg");
  width: 100%;
  height: 100%;
  position:fixed;
  margin-left: -8px;
  margin-top: -8px;
  background-size:100% 100%;
}
</style>
